<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input type="file" id="file">
  <img src="" alt="">
  <button>上传</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.6.2/jquery.js"></script>
  <script>
    $(function(){
      $('button').click(function(){
        if(!$('input')[0].files[0]){
          alert('上传前 请选中  图片')
          return;
        }
        var formdata = new FormData();
        formdata.append('img',$('input')[0].files[0] )
        $.ajax({
          url: '/upload',
          type: 'POST',
          data: formdata,
          processData: false, //必须 缓存关了
          contentType: false, //必须 关闭 设置 数据格式（以 数据本身格式为准 xxxxx urlencoded）
          success: function(res){
            console.log(res);
          }
        })
        /* 
        formData 容器 存储 key/v 数据
        可以存储 文件格式 
        如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。
        var formData = new FormData();
        formData.append(key,v)
        formData.delete(key)
        FormData.get(key)
        */
      })
    })
  </script>
</body>
</html>